/* reset */
html{color:#000;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:16px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
img{border:none;}
em,strong{font-style:normal;font-weight:normal;}
li{list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
h1{font-size:18px;}
h2{font-size:16px;}
h3{font-size:14px;}
h4, h5, h6{font-size:100%;}
q:before,q:after{content:'';}               /* 消除q前后的内容 */
button,input,select,textarea{font-size:100%;}
/* 使得表单元素在 ie 下能继承字体大小 */
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
address,cite,dfn,em,var{font-style:normal;} /* 将斜体扶正 */
a{color:#37a;text-decoration:none;}         /* link */
a:hover{color:#f60;}
span,p,a { cursor: default }

/* 设置滚动条样式 */
body::-webkit-scrollbar { width: 0; }
body::-webkit-scrollbar {
  width: 10px; height: 1px;
}
body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #535353;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #EDEDED;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.clearfix { clear: both; }
#el-menu { border: none; }

/* reset ElementUI */
.el-input__inner {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: 47px;
  padding: 12px 5px 12px 5px;
}
.el-tag { padding: 5px 10px; display: inline; }
.el-tag + .el-tag { margin-left: 10px; }
.el-breadcrumb { display: inline-block; }
.el-menu--vertical, .el-tooltip__popper { left: 36px !important; }

/* header.vue */
.top {
  position: fixed; right: 0; left: 0;
  z-index: 1030; height: 50px; background-color: #ffffff;
}
.top-left { float: left; cursor: pointer; }
.brand { width: 60px; display: inline-block; line-height: 50px; }
.nav { display: inline-block; }
.top-left .nav ul { margin: 0 auto; padding-left: 0; }
.top-left .nav ul li { float: left; margin-left: 15px; list-style: none; }
.top-left .nav ul li:first-child { margin-left: 0; }

.top-right { float: right; cursor: pointer; }
.top-right .search-box { display: inline-block; line-height: 50px; float: left; margin-right: 15px; }
.userinfoMobile { width: 85px !important; }
.top-right .userinfo { display: inline-block; width: 100px; float: right; }
.top-right .userinfo span { display: flex; line-height: 50px; position: relative; }
.top-right .userinfo span span.username { width: 50px; padding: 0 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.top-right .userinfo span span.userimg { width: 40px; position: absolute; right: 0; }
.top-right .userinfo span span.userimg img { width: 40px; height: 40px; margin-top: 5px; border-radius: 20px;}
.top-right .userinfo:hover .top-right-info { display: block; }
.top-right-info {
  width: 100px;
  background: white; color:#333333; border-radius: 1px;
  position: relative; right: 0; z-index: 100;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-color: transparent;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
  display: none;
}
.top-right-infoMobile { top: 50px !important; }
.top-right-info ul li { padding: 0 5px; height: 30px; line-height: 30px; }
.top-right-info ul li:first-child { margin-top: 0; }
.top-right-info ul li:hover { background: rgba(0,0,0,.15); }
.top-right i { width: 30px; height: 30px; line-height: 30px; margin-left: -27px; }
.top-right input {
  width: 120px; height: 30px; padding: 0 25px 0 10px;
  border-radius: 15px; border: 1px solid #dcdfe6;
  outline: none;
}
.top-bottom { width: 100%; height: 40px; line-height: 40px; clear: both; }
.top-bottom ul { margin: 0 auto; padding-left: 0; }
.top-bottom ul li { float: left; margin-left: 15px; list-style: none; }
.top-bottom ul li:first-child { margin-left: 0; }

/* navbar.vue */
.more { float: right; font-size: 12px; color: #333; cursor: pointer; }
.more:hover, .navbar-tag span:hover { color: #f60; }
.tagspan {
  width: auto; height: 20px; line-height: 20px; cursor: pointer;
  margin: 4px 4px 4px 0; padding: 5px; display: inline-block;
  border: 1px solid rgba(64,158,255,.2); color: #409eff; border-radius: 4px;
}

/* index */
.bg { padding-top: 60px; background-repeat: round; }
.banner { width: 100%; margin: 30px 0 10px; text-align: center; }
.footer { width: 100%; padding: 20px; text-align: center; border-top:solid 1px #ccc; }
.main {  margin: 50px auto 15px; min-height: 720px; }
.section { width: 100%; min-height: 786px; }
.section-item { margin-bottom: 15px; }
.layer { width: 270px; float: right; padding: 0 15px; }
.section h4 { border-bottom: 1px solid #eaeaea; position: relative; }
.section h4, .layer h4 { height: 40px; line-height: 40px; }
.section-header h4 span span { margin-left: 10px; color: #9B9B9B; font-size: 13px; }
.tag span:hover { color: #f60; cursor: pointer; }
.active-tag { color: #f60 !important; }

.pagenator { line-height: 20px; position: absolute; right: 0; top: 10px; }
.pagenator .btn-prev { padding-right: 0px; }
.pagenator .btn-next { padding-left: 0px; }
.pagenator ul.el-pager li { min-width: 15px; }
.loadmore { padding: 20px 0 15px; text-align: center; }
.loadmore span { cursor: pointer; }
.loadmore span:hover { color: #f60; }
.section-body { min-height: 270px; margin-top: 10px; }
.card { width: 150px; display: inline-block; box-shadow: 0 5px 5px rgba(0,0,0,0.1); cursor: pointer; margin: 5px 6px; }
.card-admin .card-info { height: 60px; }
.card-admin .card-info p button { padding: 0; }
.card-admin .card-info p span:hover { color: #f60; }
.card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translate3d(0,-2px,0); -webkit-transition: all .2s linear; transition: all .2s linear; }
.card-bg { height: 200px; overflow: hidden; position: relative;}
.card-rate { width: 40px; height: 20px; line-height: 20px; padding: 0 3px; background-color: #e53935; color: #fff; text-align: center; position: absolute; top: 0; left: 50%; margin-left: -15px; }
.card-info { height: 40px; padding: 10px 5px; text-align: center; }
.card-info p { margin: 5px 0;overflow: hidden; display: list-item; }
.card-info .options .el-button+.el-button { margin-left: 5px; }
.card-info span { overflow: hidden; }
.over { white-space: nowrap; text-overflow: ellipsis; }
.best ul li { height: 30px; line-height: 30px; overflow: hidden; }
.best ul li a { color: #37a; }

/* detail */
.detail { padding-top: 75px; }
.section-info {}
.section-info1 { width:180px; height: 260px; float: left; }
.section-info2 { width: calc(100% - 195px); padding-left: 15px; float: left; }
.section-info2 p { line-height: 20px; margin-bottom: 5px; }
.section-info2 p div.el-rate { display: inline-block; top: -3px; position: relative; }
.cate-page { width: 100%; height: 40px; position: relative; }

/* tagscloud */
#tagscloud{height:250px;position:relative;font-size:12px;color:#333;text-align:center;}
#tagscloud a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}
#tagscloud a.tagc1{background:#666;color:#fff;}
#tagscloud a.tagc2{background:#F16E50;color:#fff;}
#tagscloud a.tagc3{background:#e6e13c;color:#fff;}
#tagscloud a:hover{color:#fff;background:#0099ff;}

/* main.vue */
.main-admin { height: 100%; overflow: hidden; }

/* categories.vue */
.category-all { margin-top: 20px; }
.category-all p { line-height: 22px; margin-bottom: 5px; }
.condition span { margin-right: 10px; cursor: pointer; }
.condition span:hover { color: #f60; }
.category-rate { height: 38px; line-height: 38px !important;  }
.category-rate span { height: 38px; line-height: 38px; display: inline-block; }
.category-rate span:nth-child(1) { position: relative; top: -15px; }
.category-rate span:nth-child(2) { width: 200px; }
.category-rate span:nth-child(3) { position: relative; top: -13px; margin-left: 10px; }
.active-span { color: #f60; }

/* category.vue */
.category { padding-top: 75px; }
.category .el-container { display: block; }
.cate-all {  }
.cate-info { min-height: 591px; margin: 15px auto 20px; }
.catemovies {
  width: 100%;
  margin-top: 15px; display: flex;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.catemovies:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translate3d(0,-2px,0); -webkit-transition: all .2s linear; transition: all .2s linear; }
.catemovies h4 { padding: 10px 0; }
.movielogo { width: 160px; height: 240px; padding: 10px 8px; float: left; flex: none; }
.movieinfo { padding: 10px 8px; float: left; }
.movieinfo p { margin-bottom: 5px; line-height: 20px; }

/* Admin：后台样式 2018.10.08 */
/* login.vue && register.vue */
.box {
  width: 100%; height: 100%;
  background-color: #2d3a4b;
  position: fixed;
}
.box .login {
  width: 520px; max-width: 100%;
  padding: 35px 35px 15px;
  position: absolute; top: 50%; left: 0; right: 0;
  margin: -210px auto 0;
}
.login .el-form-item {
    background: rgba(0,0,0,.1);
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 5px;
    color: #454545;
}
.svg-container.svg-container_login {
  color: #889aa4;
  display: inline-block;
  padding: 6px 5px 6px 15px;
  vertical-align: middle;
  width: 60px;
}
.login .el-input {
    display: inline-block;
    height: 37px;
    width: 80%;
}
.login .title h3 {
  color: #eee;
  font-size: 26px;
  font-weight: 700;
  margin: 0 auto 40px;
  text-align: center;
}
.login .tips {
  color: #fff;
}
.login .tips p { margin-bottom: 10px; }
.login .tips p span.left { float: left; }
.login .tips p span.right { float: right; }
.login .tips p span.right a { color: #fff; }
.login .tips p span.right a:hover { color: #37a; }

.info-search-left .el-input { background-color: #fff; }
.el-input-group__append, .el-input-group__prepend { border: none !important; }
.input-with-select .el-input-group__append { background-color: #fff; border-left: 1px solid #ccc !important; }
.form .el-input__inner { height: 40px; border: 1px solid #dcdfe6; }
.dialog .el-dialog--center .el-dialog__body { padding: 25px 25px 0; }
.dialog .el-input__inner { background: #fff; color: #000!important; caret-color: auto; }

/* sidebar.vue */
.sidebar {
  float: left; background-color:#304156;
  bottom: 0;
  font-size: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  transition: width .28s;
  /* width: 180px!important; */
  z-index: 1001;
}

/* setting.vue */
.item > li.el-menu-item, .el-submenu__title, .el-menu-item .el-tooltip {
  padding: 0 10px !important;
}
.isCollapse { width: 36px !important; }
.top-info {
  height: 50px; line-height: 50px; padding: 0 10px;
  border-bottom: solid 1px rgb(84, 92, 100, .3);
}
.top-bread {
  min-height: 30px;
  padding: 5px 10px; cursor: pointer;
  box-shadow: 0 5px 5px rgba(0,0,0,.1);
  overflow: auto;
}
.top-info-1, .top-info-2 { display: inline-block; }
.top-info-1 { transition:transform .3s linear; cursor: pointer; width: 20px; }
.top-info-2 { margin-left: 5px; width: calc(100% - 30px); height: 100%; }
.avatar { float: right; height: 100%; }
.avatar span { height: 100%; float: left; margin: 0 5px; display: inline-block; border-radius: 5px; }
.avatar span img { height: 40px; margin-top: 5px; border-radius: 10px; }
.logout { cursor: pointer; }
.logout:hover { color: #409EFF; }
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

/* content.vue */
.content {
  width: 100%; height: 100%;
  transition: all .3s ease;
  position: absolute; right: 0px;
}

/* pages: api.vue/main.vue/movies.vue/users.vue */
.mobile-warp {
  background: #000;
  height: 100%;
  opacity: .3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.info { height: calc(100% - 91px); background: #f0f2f5;  }
.info-section { padding: 10px 20px; }
.info-section:after { content: ''; clear: both; }
.info-users { height: 120px; padding: 10px 10px; }
.info-search { height: 47px; }
.info-content { min-height: calc(100% - 88px); background: #ffffff; }
.card-pannel {
  width: 25%; height: 100px; line-height: 100px;
  margin-top: 15px; padding: 0 10px; float: left;
  cursor: pointer; overflow: hidden; text-align: center; box-sizing: border-box;
}
.card-pannel-left { width: 40%; font-size: 40px; float: left; background: #ffffff; }
.card-pannel-right { width: 60%; height: 100%; float: right; background: #ffffff; }
.card-pannel-right div { height: 50%; position: relative; top: 50%; margin-top: -25px; }
.card-pannel-right span { display: block; height: 50%; line-height: 25px; }
.model-tip { line-height: 25px; margin-left: 120px; font-size: 12px; }

#ChartOne { width: 100%; height: 300px; padding: 10px; box-sizing: border-box; background: #fff; }
.info-search-left { width: 40%; min-width: 220px; float: left; }
.info-search-right { width: 99px; height: 100%; float: right; }
.info-search-right button { height: 47px; }
.setadmin { color: #409EFF; cursor: pointer; padding: 0 5px; word-break: break-all; display: inline-block; }
.setadmin:hover { color: #f60; cursor: pointer; }

/* @media query */
.el-header { height: 50px !important; }
.el-header, .el-footer, .el-container { margin: 0 auto; padding: 0; }
.el-pagination { display: inline-block; }
@media screen and (max-width: 767px) {
  .main { margin: 0 15px; }
  .content { width: 100%; }
  .el-carousel__container { height: 200px; }
  .search-box { display: none; }
  .top { padding: 15px 15px 0; }
  .card { width: 46%; margin: 5px 2%; }
  .layer { display: none; }
  .section-info1 { width:100%; height: auto; float: none; }
  .section-info2 { width: 100%; padding-left: 0; float: none; }
  .tag { display: none; }
  .search-box { display: none; }
  .box .login { padding: 20px 0; width: 90%; height: 420px; }
  .login .el-input { width: calc(100% - 85px); }
  .catemovies { display: inline-block; }
  .movies { display: inline-block; }
  .movielogo { display: inline-block; position: relative; left: 50%; margin-left: -80px; }
  .card-pannel { width: 50%; padding: 0 5px; }
  .info-section { padding: 10px; }
  .info-users { height: 240px; padding: 5px; }
  .documentdialog .el-dialog { width: 90% !important; }
  .documentdialog .el-dialog .el-form-item__label { width: 80px !important; }
  .documentdialog .el-dialog .el-form-item__content { margin-left: 80px !important; }
}
@media screen and (min-width: 768px) and (max-width: 1217px) {
  /* .el-header, .el-footer, .el-container { width: 100%; } */
  .el-header, .el-footer, .el-container { width: 738px; }
  .main { margin: 0 15px; }
  .content { width: calc(100% - 200px) }
  .card { width: 150px; margin: 5px 12px; }
  .el-carousel__container { height: 300px; }
  .layer { width: 185px; }
}
@media screen and (min-width: 1218px) {
  .el-header, .el-footer, .el-container { width: 1218px; }
  .main { margin: 0 15px; }
  .content { width: calc(100% - 200px) }
  .el-carousel__container { height: 515px; }
}
